<template>
    <div class="box">
        <header class="header">
          <ul>
            <li @click="back"><i class="iconfont icon-jiantouarrowhead7"></i></li>
            <li><h5>我的订单</h5></li>
            <li></li>
          </ul>
        </header>
        <div class="content">
          <ul class="indent">
            <router-link tag="li" v-for="(item, index) of list" :key="index" :to="item.path">
              <p></p>
              <span>{{item.name}}</span>
            </router-link>
          </ul>
        </div>
    </div>
</template>

<script>
export default {
  methods: {
    back () {
      this.$router.go(-1)
    }
  },
  data () {
    return {
      list: [{
        name: '全部',
        path: '/all',
        icon: 'iconfont icon-xin'
      }, {
        name: '待付款',
        path: '/payment',
        icon: 'iconfont icon-xin'
      }, {
        name: '待收货',
        path: '/receiving',
        icon: 'iconfont icon-xin'
      }, {
        name: '待发货',
        path: '/shipments',
        icon: 'iconfont icon-xin'
      }, {
        name: '已完成',
        path: '/completed',
        icon: 'iconfont icon-xin'
      }, {
        name: '待评价',
        path: '/estimate',
        icon: 'iconfont icon-xin'
      }, {
        name: '退款/售后',
        path: '/refund',
        icon: 'iconfont icon-xin'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  @include rect(100%, 0.4rem);
  @include background-color(#DFDFDF);
  ul {
    @include rect (95%, 100%);
    // background:red;
    margin:0 auto;
    @include flexbox();
    @include justify-content(space-between);
    @include align-items();
    li {
      i{
        @include font-size(0.15rem);
        @include text-color(#101010);
      }
      h5 {
        @include font-size(0.15rem);
        @include text-color(#101010);
        @include font-weight(100);
      }
    }
  }
}
.indent {
  @include rect(100%, auto);
  li {
    @include rect(100%, 0.66rem);
    border-bottom:1px solid #ccc;
    @include flexbox();
    @include align-items();
    p {
      @include rect(0.35rem, 0.35rem);
      background:#ececec;
      border-radius: 0.08rem;
      margin:0 0.1rem;
    }
  }
}
</style>
